<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        .view {
            padding: 2px;
            border: 1px solid black;
        }
        .view, .edit {
            height: 150px;
            width: 400px;
            font-family: sans-serif;
            font-size: 14px;
            display: block;
        }
    </style>
</head>
<body>
    <ul>
        <li>点击下面的这个 div 来进行编辑。</li>
        <li>按 Enter 键或者通过 blur 来保存结果。</li>
      </ul>
      
      (PS：可输入HTML代码)
      <div id="view" class="view">Text</div>

      <script>
      let area = null;
      let view = document.getElementById('view');

    view.onclick = function() {
      editStart();
    };

    function editStart() {
      area = document.createElement('textarea');
      area.className = 'edit';
      area.value = view.innerHTML;

      area.onkeydown = function(event) {
        if (event.key == 'Enter') {
          this.blur();
        }
      };

      area.onblur = function() {
        editEnd();
      };

      view.replaceWith(area);
      area.focus();
    }

    function editEnd() {
      view.innerHTML = area.value;
      area.replaceWith(view);
    }
</script>
</body>
</html>